<template>
	<div class="sum-report" v-if="async">
		<div class="">
			<x-chart :grid="grid" :data="chartData" ref="xChart" :extend="chartExtend" :colors="colors" :settings="chartSettings"></x-chart>
		</div>
	</div>
</template>

<script>
	import actions from './actions'
	import ala from 'ala'
	export default {
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		props: {
			dataModel: {}
		},
		data() {
			return {
				viewModel: '',
				chartData: {},
				chartExtend: {},
				tableData: {},
				colors: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
				grid: {
					show: true,
					height: 320,
					backgroundColor: '#fff',
					borderColor: '#fff'
				},
				chartSettings: {
					type: 'line'
				},
				currentPage: 1,
				reportApi: 'Api/ReportRank/GetRankReport',
				tableApi: 'Api/ReportRank/GetRankTable',
				async: false
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var dataModelChart = {
					...this.dataModel,
					...this.dataModel.rank
				}
				await actions.getTable(this, dataModelChart)
				this.chartData.columns = this.tableData.chartColumns
				this.chartData.rows = this.tableData.rows
				this.chartSettings.type = actions.chartType(dataModelChart.reportType)
				this.$nextTick(async () => {
					if (this.$refs.xChart) {
						this.$refs.xChart.init(this.chartData)
					}
				})
				this.async = true
			},
			// 设置颜色
			tableRowClassName({
				row,
				rowIndex
			}) {
				if ((rowIndex % 2) === 0) {
					return ''
				} else {
					return 'success-row'
				}
			},
			async pagesChange(ev) {
				await actions.pageChange(this, ev)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.pagination-list {
		width: 100%;
		display: flex;
		justify-content: center;
	}
</style>